﻿@model Yunwei.Web.Areas.RRShop.Models.CategoryViewModel

@{
    ViewBag.Title = "Edit";
}

<link href="~/Content/cropper.min.css" rel="stylesheet" />
<script src="~/Scripts/cropper.min.js"></script>
<script src="~/Scripts/inside.js"></script>
<script src="~/Scripts/lbs_map.js"></script>

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">编辑分类</h1>
    </div>
    <div class="col-lg-6">
        <a class="btn btn-primary btn-circle" href="/RRShop/Category/List/@ViewBag.Id"><i class="fa fa-reply"></i></a>
    </div>
</div>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <link href="~/Scripts/KindEditor/themes/default/default.css" rel="stylesheet" />
        <script src="~/Scripts/KindEditor/kindeditor-min.js"></script>
        <script src="~/Scripts/KindEditor/lang/zh_CN.js"></script>
        <div class="form-group">
            @Html.LabelFor(model => model.Avatar, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-8">
                <input class="form-control" type="hidden" name="Avatar" id="avatarPath" value="" />
                <img class="img-responsive" id="avatarThumbnail" src="@Model.Avatar" />
                <input class="btn btn-success" type="button" id="avatarBrowser" value="选择图片" />
                <input class="btn btn-warning hidden" type="button" id="avatarMake" data-target="#modal" data-toggle="modal" value="制作缩略图" />
            </div>

            <script type="text/javascript">
                $(document).ready(function () {
                    var $image = $('#avatarPreview');
                    var cropBoxData;
                    var canvasData;

                    $('#modal').on('shown.bs.modal', function () {
                        $image.cropper({
                            aspectRatio: 1,
                            autoCropArea: 0.5,
                            built: function () {
                                $image.cropper('setCanvasData', canvasData);
                                $image.cropper('setCropBoxData', cropBoxData);
                            }
                        });
                    }).on('hidden.bs.modal', function () {
                        var cropBox = $image.cropper('getData');
                        $image.cropper('destroy');

                        $.ajax({
                            url: "/Attachment/CreateThumbnail",
                            method: "POST",
                            data: {
                                url: $('#avatarPath').val(),
                                top: cropBox.y,
                                left: cropBox.x,
                                width: cropBox.width,
                                height: cropBox.height
                            },
                            dataType: "json",
                            success: function (resp) {
                                if (resp.error == 0) {
                                    $("#avatarPath").val(resp.url);
                                    $("#avatarThumbnail").attr("src", resp.url);
                                }
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                console.log(errorThrown);
                            }
                        });
                    });

                });

                KindEditor.ready(function (K) {
                    var editor = K.editor({
                        uploadJson: "/Attachment/Upload",
                        fileManagerJson: "/Attachment/FileManager",
                        allowFileManager: true
                    });

                    K('#avatarBrowser').click(function () {
                        editor.loadPlugin('image', function () {
                            editor.plugin.imageDialog({
                                imageUrl: K('#avatarPath').val(),
                                clickFn: function (url, title, width, height, border, align) {
                                    K('#avatarPath').val(url);
                                    K('#avatarPreview').attr("src", url);
                                    editor.hideDialog();
                                    if (url.indexOf(window.location.host) > -1)
                                        $("#avatarMake").click();
                                }
                            });
                        });
                    });
                });
            </script>

        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Description, new { @class = "form-control", @id = "category_description", @style = "width:700px;height:400px", @visibility = "hidden" })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
            <script>
                var editor;
                KindEditor.ready(function (K) {
                    editor = K.create('textarea[id="category_description"]', {
                        allowFileManager: true
                    });
                });
            </script>
        </div>

        <div class="form-group">
            @Html.HiddenFor(model => model.Restaurant_Id);
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="提交" class="btn btn-success" />
            </div>
        </div>
    </div>
}

<div class="modal fade" id="modal" aria-labelledby="modalLabel" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modalLabel">裁剪图片</h4>
            </div>
            <div class="modal-body">
                <div>
                    <img id="avatarPreview" src="" alt="Picture" style="max-width: 100%;" />
                </div>
            </div>
            <div class="modal-footer">
                <span style="clear:both;float:left;color:red;line-height:34px;"><i class="fa fa-warning fa-fw"></i>滚动鼠标缩放图片</span>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>